<template>
  <div class="wrapper">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/PowerGridOperation' }">预警策略</el-breadcrumb-item>
        <el-breadcrumb-item>人员避险</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="10">
          <div style="  height: 100%;padding:5px;border: 1px solid #334d6a;box-sizing: border-box;">
            <mapContent></mapContent>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="particulars">
            <div class="essential">
              <div class="title">预警通知单基本信息</div>
              <div class="essential-text">
                <el-descriptions title="国网湖北电力预警[2022]第7号" :column="1">
                  <el-descriptions-item label="险情类别">{{ essential.xqlb }}</el-descriptions-item>
                  <el-descriptions-item label="预警级别">{{ essential.yjjb }}</el-descriptions-item>
                  <el-descriptions-item label="影响范围">{{ essential.yxfw }}</el-descriptions-item>
                  <el-descriptions-item label="影响时间">{{ essential.yxsj }}</el-descriptions-item>
                  <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                </el-descriptions>
                <el-descriptions direction="vertical" style="margin-top: 10px;">
                  <el-descriptions-item label="事件概要" :contentStyle="{color:'#fff'}">{{ essential.sjgy }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div class="essential" style="margin-top: 5px;">
              <div class="title">人员避险措施</div>
              <div class="measures">
                {{ essential.rybxcs }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="flex:1;padding-top:10px">
        <el-col>
          <div class="feedback">
            <div class="title">人员避险情况反馈</div>
            <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
              <div class="detail" v-for="(item,index) in feedback" :key="index">
                <div class="detail-time">
                  <div></div>
                  <div>{{ item.time }}</div>
                </div>
                <div class="detail-content">
                  <img :src="n" alt="" v-for="(n,i) in item.img" :key="i">
                  <div>{{item.text}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import mapContent from "../EarlyWarningManagement/WarningAction/components/mapContent.vue";
export default {
  components: {
    mapContent
  },
  data() {
    return {
      essential: {
        xqlb: "强对流、暴雨",
        yjjb: "蓝色",
        yxfw: "随州市",
        yxsj: "2022-07-18至2022-07-20",
        sjgy: "7月19日至20日为最强降水时段，武汉、剥州、宜吕、孝感、荆门、黄冈、随州、恩施等地有大到属雨、局部大暴雨，其他地区中到大雨、局部展雨，过程期间累计降雨量一般40-80 毫米，局部150-250毫米。期间，短时强降水、雷雨大风等强对流天气多发，最大小时雨强 40-90 毫米，时大风风力可达8-11级",
        rybxcs: "据湖北省重大气象信息专报([2022]第18期)预报，未来一周全省以分散性阵雨为主，局部有大雨或暴雨，于2022年7月19日14时25分组织随州市户外施工及作业人员主动避险、及时通知可能受到影响的单位和人员。"
      },
      feedback: [
        {
          time: "2022-07-18 08:32:09",
          img: [require("../../assets/img/Picture/avoidance1.png")],
          text: "7月18日早晨，随州市何店镇供电收到下发的人员避险措施，并提醒在附近巡线的电力工人注意安全。电力工人接到消息后，立即停止了人工线咱巡视，紧急避险"
        },
        {
          time: "2022-07-18 09:52:09",
          img: [require("../../assets/img/Picture/avoidance2.png"), require("../../assets/img/Picture/avoidance3.png")],
          text: "7月18日早晨，随州市燕家湾镇供电所收到下发的人员避险措施，并提阳在附近施工的电力工人注意安全，电力工人接到消息后，立即停止了现场施工，紧急避险"
        },
        {
          time: "2022-07-18 12:02:19",
          img: [require("../../assets/img/Picture/avoidance1.png")],
          text: "1111111111111111111111111111111111111111111111111111111111111111111111117月18日早晨，随州市何店镇供电收到下发的人员避险措施，并提醒在附近巡线的电力工人注意安全。电力工人接到消息后，立即停止了人工线咱巡视，紧急避险"
        }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  :deep(.el-breadcrumb) {
    font-size: 16px;
  }
  .location-wrap {
    line-height: 25px;
  }
}
:deep(.el-col) {
  height: 100%;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 20px 20px;
  height: 100%;
}
.title {
  line-height: 40px;
  padding-left: 20px;
  font-size: 18px;
  font-weight: 800;
  background-color: #043e6e;
  color: #fff;
}
.particulars {
  .essential {
    border: 1px solid #334d6a;
    padding: 5px 2px;
    .essential-text {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      > div {
        width: 48%;
      }
      :deep(.el-descriptions) {
        .el-descriptions__title {
          font-size: 18px;
          color: #fff;
          font-weight: 800;
        }
        .el-descriptions__body {
          font-size: 16px;
          background-color: unset;
          .el-descriptions-item__label {
            color: #c1c3c7;
          }
          .el-descriptions-item__container {
            color: #fff;
          }
        }
      }
    }
    .measures {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      padding: 10px 20px;
    }
  }
}
.feedback {
  height: 100%;
  border: 1px solid #334d6a;
}
.detail {
  padding: 20px;
  .detail-time {
    color: #0377cb;
    font-size: 16px;
    display: flex;
    align-items: center;
    > div:nth-child(1) {
      width: 10px;
      height: 10px;
      background-color: #0377cb;
      margin-right: 20px;
      border-radius: 50%;
      box-shadow: 0px 0px 10px 5px #67b3dd;
    }
  }
  .detail-content {
    color: #fff;
    font-weight: 600;
    display: flex;
    margin-top: 20px;
    > img {
      margin-right: 10px;
      width: 140px;
      height: 110px;
    }
    > div {
      margin-top: 5px;
      height: 100px;
      width: 300px;
      overflow: hidden;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      word-break: break-all;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
